<!DOCTYPE html>
<html lang="zh" xmlns:th="http:www.thymeleaf.org">

<header>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>宠爱 知识星球</title>

    <!-- Favicons -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>
    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/jquery-3.6.0.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>

    <style>
        .icon-xin {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.3);
        }

        .active {
            color: #E1251B;
        }

        .active {
            animation: heart 0.5s linear;
        }

        @keyframes heart {
            from {
                font-size: 20px;
            }
            50% {
                font-size: 18px;
            }
            to {
                font-size: 20px;
            }
        }

        #addcoll {
            background: transparent; /*按钮背景透明*/
            border-width: 0px; /*边框透明*/
            outline: none; /*点击后没边框*/

        }
    </style>

</header>

<body>
<input type="hidden" th:value="${session.user.userId}" id="userId" th:if="${session.user!=null}">
<input type="hidden" th:value="${isCollect}" id="isCollect">
<input type="hidden" th:value="${article.articleId}" id="artId">
<!-- Header Section Start -->
<div class="header section" th:replace="~{common/head::head}"></div>
<!-- Header Section End -->

<!-- Breadcrumb Area Start -->
<div class="section breadcrumb-area bg-name-bright">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="breadcrumb-wrapper">
                    <h2 class="breadcrumb-title">文章详情</h2>
                    <ul>
                        <li><a th:href="@{/goods/show}" style="font-size:16px">首页</a></li>
                        <li style="font-size:14px">文章详情</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Breadcrumb Area End -->

<!-- Blog Details Section Start -->
<div class="section section-margin">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 m-auto overflow-hidden">
                <!-- Blog Details Wrapper Start -->
                <div class="blog-details-wrapper">

                    <!-- Blog Details Content Start -->
                    <div class="blog-details-content">

                        <!-- Blog Image Start -->
                        <div class="blog-image">
                            <img th:src="'http://localhost:8080/uploadFile/article/'+${article.articleImgpath}" alt="Blog Image" class="fit-image">
                        </div>
                        <!-- Blog Image End -->

                        <!-- Blog details title & Meta Start -->
                        <div class="blog-details-title-meta">
                            <h2 class="title" th:text="${article.articleTitle}"></h2>
                            <ul class="blog-meta">
                                <li>类型: <span th:text="${article.articleLabel}"></span> <span
                                        th:text="${#dates.format(article.createTime,'yyyy-MM-dd')}"></span></li>
                                <li><span th:text="${article.viewNum}"></span> 阅读</li>
                            </ul>
                        </div>


                        <!-- Blog details title & Meta End -->

                        <!-- Content Start -->
                        <h4><p th:text="${article.articleContent}"></p></h4>
                        <!-- Content End -->

                        <!-- Blog Details Tags & Social Shear Start -->
                        <div class="blog-details-tag-social m-b-n20">

                            <!-- Blog Details Tags Start 收藏-->

                            <!-- Blog Details Tags End -->

                            <!-- Social Shear Start -->
                            <div class="social-share m-b-20">
                                <div class="widget-social" tyle="float: right;">
                                    <a href="javascript:void(0)" id="xin">
                                        <i class="iconfont icon-xin" ></i>
                                        <span id="colle">收藏</span>
                                    </a>
                                </div>
                            </div>
                            <!-- Social Shear End -->
                        </div>
                        <!-- Blog Details Tags & Social Shear End -->
                    </div>

                </div>
                <!-- Blog Details Wrapper End -->
            </div>
        </div>
    </div>
</div>
<!-- Blog Details Section End -->

<!-- Footer Section Start -->
<footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>
<!-- Footer Section End -->


<!-- Scroll Top Start -->
<a href="#" class="scroll-top show" id="scroll-top">
    <i class="arrow-top ti-angle-double-up"></i>
    <i class="arrow-bottom ti-angle-double-up"></i>
</a>
<!-- Scroll Top End -->
</body>

<script>
    //是否收藏

    let userIdStr = $('#userId').val();
    let isCollectStr = $('#isCollect').val();
    let articleIdStr = $('#artId').val();

    let userId = parseInt(userIdStr);
    let isCollect = parseInt(isCollectStr);
    let articleId = parseInt(articleIdStr);

    var heart = document.getElementById("xin");
    var span = document.getElementById("colle");

    if (isCollect != 0) {
        heart.className = "iconfont icon-xin active";
        span.innerHTML = "已收藏";
    }
    // 点击收藏 【心】 事件
    heart.onclick = function () {
        console.log(userId);
        console.log(articleId);
        if (isNaN(userId) || userId==null) {
            alert("请先登录")
            location="http://localhost:9001/login.html"
        } else if (isCollect == 0||isCollect==null) { //点击收藏
            // 修改样式
            $.ajax({
                url: "/article/addCol",
                type: "post",
                data: {
                    "userId": userId,
                    "articleId": articleId
                },
                success: function (result) {
                    let code = result.code;
                    if (code == "200") {
                        alert("收藏成功");
                        this.className = "iconfont icon-xin active";
                        span.innerHTML = "已收藏";  //改变收藏状态
                        window.location.reload();
                    } else {
                        alert("未知错误");
                    }
                }
            })
        } else { //点击取消收藏
            $.ajax({
                url: "/article/removeCol",
                type: "post",
                data: {
                    "isCollect": isCollect,
                    "articleId": articleId
                },
                success: function (result) {
                    let code = result.code;
                    if (code == "200") {
                        alert("取消收藏成功");
                        this.className = "iconfont icon-xin";
                        span.innerHTML = "收藏"
                        isCollect == 0;
                        window.location.reload();
                    } else {
                        alert("未知错误");
                    }
                }
            })

        }
    }
</script>

</html>